<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input
          v-model.trim="searchForm.name"
          clearable
          @clear="clearInput"
          placeholder="请输入监控点位名称"
          size="small"
          style="width: 220px"
          maxlength="50"
        >
          <el-button
            slot="append"
            :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
            @click="searchClick"
          >
          </el-button>
        </el-input>
        <el-popover
          placement="bottom"
          width="500"
          trigger="click"
          style="margin-left: 0px"
          popper-class="popover"
          size="small"
          v-model="showPopover"
        >
          <div>
            <el-form
              label-width="70px"
              style="margin: 20px 0"
              class="popover_from"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item size="small" label="唯一识别码">
                    <el-input
                      v-model="searchForm.code"
                      clearable
                      placeholder="请输入唯一识别码"
                      size="small"
                      style="width: 150px; margin-left: 15px"
                      maxlength="50"
                      oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item size="small" label="点位类型">
                    <el-select
                      size="small"
                      style="width: 150px; margin-left: 15px"
                      clearable
                      v-model="searchForm.type"
                      placeholder="请选择监控点位类型"
                    >
                      <el-option
                        v-for="(item, index) in typeList"
                        :label="item.label"
                        :value="item.value"
                        :key="index"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item size="small" label="同步时间">
                <el-date-picker
                  v-model.trim="timeArr"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                  style="width: 400px"
                  clearable
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div class="footer" style="text-align: right">
              <el-button size="small" @click="resetClick" class="cancel-button">重 置</el-button>
              <el-button size="small" @click="searchClick1" class="confirm-button"
                >确 定</el-button
              >
            </div>
          </div>
          <el-button
            size="small"
            style="
              margin-left: 15px;
              background: #7367f0;
              color: #fff;
              border: none;
              font-size: 14px;
              padding: 8px 15px;
            "
            slot="reference"
          >
            高级搜索<i
              class="el-icon-search"
              style="margin-left: 5px; font-size: 12px"
            ></i
          ></el-button>
        </el-popover>
      </div>
      <div class="header_right">
        <el-button
          class="el_button"
          size="small"
          icon="el-icon-plus"
          style="margin-left: 15px"
          @click="onAddSync"
        >
          <!-- v-permission="{ action: 'manufacturer:add' }" -->
          新增并同步
        </el-button>
        <el-button
          class="el_button"
          size="small"
          style="margin-left: 15px"
          @click="autoCreateClick"
        >
          <!-- 全部设备信息更新到自己库 -->
          <i class="iconfont shengcheng"></i>
          自动生成
        </el-button>
        <el-button
          class="el_button"
          size="small"
          style="margin-left: 15px"
          @click="allSynchronousClick"
        >
          <!-- 全部设备信息同步到他们库 -->
          <i class="iconfont pilianggengxin"></i>
          全量同步
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="dataList"
        height="calc(100% - 65px)"
        class="table"
        :header-cell-style="headerStyle"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="70"
          height="30"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="点位名称"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="点位id"
          min-width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="code"
          min-width="120"
          label="唯一识别码"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="townName"
          label="所属街道"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="townId"
          label="所属街道ID"
          min-width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="townCode"
          label="镇街道行政编码"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="villageName"
          label="所属村居名称"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="villageId"
          label="所属村居ID"
          min-width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="code"
          label="点位编码"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="type"
          label="点位类型"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="outline"
          label="概述"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="详细地址"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="gpsLnt"
          label="经度"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="gpsLat"
          label="纬度"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="changeUsersName"
          label="负责人"
          min-width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.changeUsersName }} {{ scope.row.changeUsersMobile }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="status"
          label="状态"
          min-width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">已同步</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status == 0"
              >未同步</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="syncTime"
          label="同步时间"
          min-width="180"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column align="center" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="同步"
              placement="bottom"
            >
              <i
                @click="syncClick(scope.row)"
                class="iconfont tongbu tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="生成"
              placement="bottom"
            >
              <i
                @click="editClick(scope.row)"
                class="iconfont shengcheng tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        :pageSizes="[10, 20, 30, 50]"
        @pagination="getDataList"
        class="pagination"
      />
    </div>

    <addSync ref="refAddSync"></addSync>
  </div>
</template>

<script>
import {
  reqBaiYuMonitorPage,
  reqBaiYunMonitorEditMul,
  reqautoGenerateByMonitor,
  reqallSyncByMonitor,
  reqSyncByMonitor,
  reqGenerateByMonitor,
  reqAddByMonitor,
} from "@api/baiyunArea.js";
import Pagination from "@/components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";
import advanceSearchMixin from "./mixins/advanceSearch.js";
import addSync from "./components/addSync.vue";
import { mapState } from "vuex";
export default {
  name: "monitoringPoint",
  components: { Pagination, addSync },
  mixins: [tableStyleMixin, advanceSearchMixin],
  data() {
    return {
      limit: 10,
      page: 1,
      total: 0,
      tenantName: "",
      loadingSearch: false, //查询按钮loading
      dataList: [],
      editData: {}, //修改数据
      batchDataList: [],
      searchForm: {
        name: "",
        code: "",
        type: "",
        startTime: "",
        endTime: "",
      },
      timeArr: [],
      showPopover: false,

      typeList: [
        {
          label: "摄像头",
          value: 1,
        },
      ],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取列表
    async getDataList() {
      const res = await reqBaiYuMonitorPage(this.page, this.limit, {
        name: this.searchForm.name,
        code: this.searchForm.code,
        type: this.searchForm.type,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { records, total } = res.data.data;
      this.total = total;
      this.dataList = records;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
      // this.clearSelections();
    },
    // 清空复选框√√
    clearSelections() {
      this.$refs.refTable.clearSelection();
    },
    // 清空输入框
    clearInput() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },

    // 新增并同步
    onAddSync() {
      this.$refs.refAddSync.dialogVisible = true;
    },
    // // 新增
    // async addClick() {
    //   if (!this.batchDataList.length)
    //     return this.$modal.notifyWarning("请选择需要新增并同步的设备");
    //   const result = await this.$confirm(
    //     "是否确定新增并同步所勾选的设备?",
    //     "提示",
    //     {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   ).catch(() => {});
    //   if (result !== "confirm") return;
    //   let uniqueCode = this.batchDataList.map((item) => item.uniqueCode);
    //   console.log(uniqueCode, "uniqueCode");
    //   const res = await reqAddByMonitor(uniqueCode);
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   this.$modal.notifySuccess("操作成功");
    //   this.getInitDataList();
    // },
    // 单个同步
    async syncClick(row) {
      const result = await this.$confirm(
        "此操作将同步该设备数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqSyncByMonitor(row.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("操作成功");
      this.getInitDataList();
    },
    // 编辑
    async editClick(row) {
      const result = await this.$confirm(
        "此操作将生成该设备数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqGenerateByMonitor({
        id: row.id,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("操作成功");
      this.getInitDataList();
    },

    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      this.batchDataList = arr;
    },
    // 自动生成
    async autoCreateClick() {
      const result = await this.$confirm(
        "此操作将自动生成列表所有设备数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqautoGenerateByMonitor(this.user.tenantId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let result2 = this.$confirm(
        "操作成功，是否立即前往任务管理页面查看进度？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      ).catch(() => {});
      if (result2 !== "confirm") return;
      this.$router.push("/system/task");
    },
    // 全量同步
    async allSynchronousClick() {
      const result = await this.$confirm(
        "此操作将全量同步设备数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqallSyncByMonitor(this.user.tenantId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let result2 = this.$confirm(
        "操作成功，是否立即前往任务管理页面查看进度？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      ).catch(() => {});
      if (result2 !== "confirm") return;
      this.$router.push("/system/task");
    },

    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.limit;
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
::v-deep .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
.pilianggengxin {
  font-size: 12px;
  margin-right: 5px;
}
.shengcheng {
  font-size: 12px;
  margin-right: 5px;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .popover_from .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

::v-deep .el-button--small {
  border: none;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt;
}

// 日期控件
.el-range-editor.el-input__inner {
  margin-left: 15px;
}

::v-deep .el-table__empty-block {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding-right: 100%;
}
</style>
